extends /default.pug

block view
  .animated.fadeIn
    .row
      .col-sm-6.col-md-4
        .card
          .card-header
            | Card title
          .card-body
            | Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
      // /.col
      .col-sm-6.col-md-4
        .card
          .card-body
            | Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
          .card-footer Card footer
      // /.col
      .col-sm-6.col-md-4
        .card
          .card-header
            i.fa.fa-check
            | Card with icon
          .card-body
            | Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
      // /.col
      .col-sm-6.col-md-4
        .card
          .card-header
            | Card with switch
            label.switch.switch-sm.switch-text.switch-info.float-right.mb-0
              input.switch-input(type='checkbox')
              span.switch-label(data-on='On', data-off='Off')
              span.switch-handle
          .card-body
            | Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
      // /.col
      .col-sm-6.col-md-4
        .card
          .card-header
            | Card with label
            span.badge.badge-success.float-right Success
          .card-body
            | Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
      // /.col
      .col-sm-6.col-md-4
        .card
          .card-header
            | Card with label
            span.badge.badge-pill.badge-danger.float-right 42
          .card-body
            | Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
      // /.col
    // /.row
    .row
      .col-sm-6.col-md-4
        .card.border-primary
          .card-header
            | Card outline
          .card-body
            | Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
      // /.col
      .col-sm-6.col-md-4
        .card.border-secondary
          .card-header
            | Card outline
          .card-body
            | Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
      // /.col
      .col-sm-6.col-md-4
        .card.border-success
          .card-header
            | Card outline
          .card-body
            | Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
      // /.col
      .col-sm-6.col-md-4
        .card.border-info
          .card-header
            | Card outline
          .card-body
            | Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
      // /.col
      .col-sm-6.col-md-4
        .card.border-warning
          .card-header
            | Card outline
          .card-body
            | Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
      // /.col
      .col-sm-6.col-md-4
        .card.border-danger
          .card-header
            | Card outline
          .card-body
            | Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
      // /.col
    // /.row
    .row
      .col-sm-6.col-md-4
        .card.card-accent-primary
          .card-header
            | Card with accent
          .card-body
            | Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
      // /.col
      .col-sm-6.col-md-4
        .card.card-accent-secondary
          .card-header
            | Card with accent
          .card-body
            | Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
      // /.col
      .col-sm-6.col-md-4
        .card.card-accent-success
          .card-header
            | Card with accent
          .card-body
            | Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
      // /.col
      .col-sm-6.col-md-4
        .card.card-accent-info
          .card-header
            | Card with accent
          .card-body
            | Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
      // /.col
      .col-sm-6.col-md-4
        .card.card-accent-warning
          .card-header
            | Card with accent
          .card-body
            | Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
      // /.col
      .col-sm-6.col-md-4
        .card.card-accent-danger
          .card-header
            | Card with accent
          .card-body
            | Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
      // /.col
    // /.row
    .row
      .col-sm-6.col-md-4
        .card.text-white.bg-primary.text-center
          .card-body
            blockquote.card-bodyquote
              p
                | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
              footer
                | Someone famous in
                cite(title='Source Title') Source Title
      // /.col
      .col-sm-6.col-md-4
        .card.text-white.bg-success.text-center
          .card-body
            blockquote.card-bodyquote
              p
                | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
              footer
                | Someone famous in
                cite(title='Source Title') Source Title
      // /.col
      .col-sm-6.col-md-4
        .card.text-white.bg-info.text-center
          .card-body
            blockquote.card-bodyquote
              p
                | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
              footer
                | Someone famous in
                cite(title='Source Title') Source Title
      // /.col
      .col-sm-6.col-md-4
        .card.text-white.bg-warning.text-center
          .card-body
            blockquote.card-bodyquote
              p
                | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
              footer
                | Someone famous in
                cite(title='Source Title') Source Title
      // /.col
      .col-sm-6.col-md-4
        .card.text-white.bg-danger.text-center
          .card-body
            blockquote.card-bodyquote
              p
                | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
              footer
                | Someone famous in
                cite(title='Source Title') Source Title
      // /.col
      .col-sm-6.col-md-4
        .card.text-white.bg-primary.text-center
          .card-body
            blockquote.card-bodyquote
              p
                | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
              footer
                | Someone famous in
                cite(title='Source Title') Source Title
      // /.col
    // /.row
    .row
      .col-sm-6.col-md-4
        .card.text-white.bg-primary
          .card-header
            | Card title
          .card-body
            | Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
      // /.col
      .col-sm-6.col-md-4
        .card.text-white.bg-success
          .card-header
            | Card title
          .card-body
            | Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
      // /.col
      .col-sm-6.col-md-4
        .card.text-white.bg-info
          .card-header
            | Card title
          .card-body
            | Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
      // /.col
      .col-sm-6.col-md-4
        .card.text-white.bg-warning
          .card-header
            | Card title
          .card-body
            | Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
      // /.col
      .col-sm-6.col-md-4
        .card.text-white.bg-danger
          .card-header
            | Card title
          .card-body
            | Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
      // /.col
      .col-sm-6.col-md-4
        .card
          .card-header
            | Card actions
            .card-header-actions
              a.card-header-action.btn-setting(href='#')
                i.icon-settings
              a.card-header-action.btn-minimize(href='#', data-toggle='collapse', data-target='#collapseExample', aria-expanded='true')
                i.icon-arrow-up
              a.card-header-action.btn-close(href='#')
                i.icon-close
          #collapseExample.collapse.show
            .card-body
              | Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
      // /.col
    // /.row
    #myModal.modal.fade(tabindex='-1', role='dialog', aria-labelledby='myModalLabel', aria-hidden='true')
      .modal-dialog(role='document')
        .modal-content
          .modal-header
            h4.modal-title Modal title
            button.close(type='button', data-dismiss='modal', aria-label='Close')
              span(aria-hidden='true') ×
          .modal-body
            p One fine body…
          .modal-footer
            button.btn.btn-secondary(type='button', data-dismiss='modal') Close
            button.btn.btn-primary(type='button') Save changes
        // /.modal-content
      // /.modal-dialog
